<template>
	<view class="brand">
		<view class="navbar" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<navagationBar>
				<template>
					<view class="header">
						<view class="header-back">
							<u-icon name="arrow-left" size="40" :bold="true" @click="back"></u-icon>
							<text @click="back" v-if="flag">跳过</text>
						</view>
						<view>
							<text>选择品牌车型</text>
						</view>
					</view>
				</template>
			</navagationBar>
		</view>
		
		<view class="search">
			<uni-easyinput prefixIcon="search" v-model="keyword" placeholder="请输入汽车品牌名称" @input="getBrandList"></uni-easyinput>
		</view>
		
		<view class="list">
			<u-index-list :index-list="indexList" activeColor="#CF1A1B" :customNavHeight="100" @selectIndex="selectAnchor">		
				<view v-for="(item, index) in itemArr" :key="index" :id="indexList[index]">
					<u-index-item>
						<u-index-anchor v-if="indexList.length" :text="index === 0 ? '热门品牌' : indexList[index]" color="rgba(0,0,0,0.85)" :size="32" bgColor="#ffffff"></u-index-anchor>
						<view v-if="index===0" class="list-hot">
							<u-grid :border="false" col="4">
								<u-grid-item v-for="key of itemArr[0]" :key="key.id" @click="handleSelect(key)">
									<image v-if="key.pic" :src="key.pic"></image>
									<image v-else src="@/static/goods_default_4.png"></image>
									<text class="grid-text">{{key.carBrand}}</text>
								</u-grid-item>
							</u-grid>
						</view>
						<view v-else class="list-cell" v-for="cell of itemArr[index]" :key="cell.id" @click="handleSelect(cell)">
							<image v-if="cell.pic" :src="cell.pic"></image>
							<image v-else src="@/static/goods_default_4.png"></image>
							<text class="list-cell-text">{{ cell.carBrand }}</text>
						</view>
					</u-index-item>
				</view>
			</u-index-list>
		</view>
		
		<view v-if="emptyVisible" class="empty">
			<image src="@/static/empty.png"></image>
			<text>无数据</text>
		</view>
		
		<!--选择车系-->
		<u-popup :show="typeVisible" mode="right" :safeAreaInsetTop="true" @close="typeVisible=false">
			<view class="type">
				<view class="type-title">
          <view>选择车系</view>
					<uni-icons type="closeempty" size="20" @click="typeVisible=false"></uni-icons>
				</view>
				<view class="type-list">
					<view v-for="item of typeList" :key="item.vehicleType">
						<view class="type-list-title">{{ item.vehicleType }}</view>
						<view class="type-list-content border" v-for="series of item.seriesList" :key="series.models" @click="handleModel(series)">
							<image v-if="series.pic" :src="series.pic"></image>
							<image v-else src="@/static/goods_default_4.png"></image>
							<text>{{ series.seriesName }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!--选择车型-->
		<u-popup :show="modelVisible" mode="right" :safeAreaInsetTop="true" @close="modelVisible=false">
			<view class="type">
				<view class="type-title">
					<view>选择车型</view>
					<uni-icons type="closeempty" size="20" @click="modelVisible=false"></uni-icons>
				</view>
				<view class="type-subTitle">选择发动机排量</view>
				<view class="type-list">
					<view class="type-list-content">
						 <u-radio-group
						    v-model="radiovalue"
						    placement="column"
							iconPlacement="left"
							:borderBottom="true"
							shape="circle"
							size="30"
						    @change="groupChange"
						>
						    <u-radio
							    shape="circle"
								activeColor="#CF1A1B"
								labelSize="28"
								labelColor="rgba(0,0,0,0.65)"
								:customStyle="{marginBottom: '8px'}"
								v-for="(item, index) in modelList"
						        :key="item.levelId"
						        :label="item.carTypeName"
						        :name="item.levelId"
						    >
						    </u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { mapGetters,mapActions } from 'vuex'
	import navagationBar from '@/components/navigationBar.vue'
	
	export default {
		components: {
		  	navagationBar
		},
		data() {
			return {
				systemBarHeight: 0, // 系统状态栏的高度
				keyword: '',
				hotBrand: [],
				indexList: [],
				itemArr: [],
				emptyVisible: false,
				typeVisible: false,
				modelVisible: false,
				brandId: '', // 选择的品牌id
				typeList: [],
				modelList: [],
				radiovalue: '',
				flag: false, // 是否显示跳过按钮
				superData: {},
				carBrandPic:''
			};
		},
		onLoad(option) {
			this.flag = option.flag
			uni.showLoading({
				title: '加载中...'
			})
			this.getSysteminfo();
			this.getBrandList()
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
			...mapGetters('global', ['getSystemInfo'])
		},
		methods: {
			...mapActions('user', ['getUserInfoFn']),
			
			selectAnchor(e){
					//从当前位置到达目标位置
					uni
						.createSelectorQuery()
						.select('#' + e) 
						.boundingClientRect((data) => {
							//目标位置的节点：类或者id
							uni
								.createSelectorQuery()
								.select('.brand')
								.boundingClientRect((res) => {
									//最外层盒子的节点：类或者id
									this.$nextTick(function () {
										// data 存在点击的则是A-Z, 否则点击的是自定义锚点（热）
										uni.pageScrollTo({
											scrollTop: data ? data.top - res.top : 0,
											duration: 0 //app端这个必须设置成0
										})
									})
								})
								.exec()
						})
						.exec()
			},
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			back() {
				let source = uni.getStorageSync('authSource')
				if (source === 'index') { // 首页
					uni.switchTab({
					  url: '/pages/index/index/index'
					})
				} else if(source === 'mine'){ // 我的
					uni.switchTab({
					  url: '/pages/mine/home'
					})
				} else if(source === 'myCar'){ // 我的车辆
					// uni.navigateTo({
					//   url: `/minePack/function/myCar`
					// })
					uni.navigateBack()
				} else if(source === 'personalConfirm'){ // 个人信息页面已认证
					uni.navigateBack({delta: 4})
				} else { // personalAuth 个人信息页面未认证
					uni.navigateBack({delta: 3})
				}
				uni.$emit('refreshData')
				uni.$emit('refreshIndex')
			},
			handleSelect(val) {
				this.typeVisible = true
				this.brandId = val.id
				this.carBrandPic = val.pic
				this.getBrandType()
			},
			handleClose() {
				this.typeVisible = false
			},
			async getBrandList() {
				const res = await this.$request({
					method: 'GET',
					url: '/terminal-serve-center/car/app/choiceBrand',
					data: {
						keyword: this.keyword
					}
				})
				
				this.itemArr = []
				let brand = res.datas.brand
				let hot = res.datas.hotBrand
				if (brand.length) {
					this.indexList = ['热']
					// this.indexList = []
					this.itemArr[0] = hot
					
					for (let s of brand) {
						this.indexList.push(s.initial)
						this.itemArr.push(s.brandList)
					}
				}
				
				this.emptyVisible = !brand.length
				uni.hideLoading()
				// console.log(this.indexList);
				// console.log(this.itemArr);
			},
			async getBrandType() { // 选择车系
				const res = await this.$request({
					method: 'GET',
					url: '/terminal-serve-center/car/app/choiceCarSeries',
					data: {
						brandId: this.brandId
					}
				})
				this.typeList = res.datas
			},
			handleModel(data) { // 选择车型
				this.modelVisible = true
				this.modelList = []
				this.modelList = data.choiceCarTypeList
				this.superData.seriesName = data.seriesName
			},
			async groupChange(n) {
				this.superData.levelId = n
				let source = uni.getStorageSync('authSource')
				if(source === 'myCar') { // 我的车辆页面进来选择品牌不需要请求接口
					this.getOpenerEventChannel().emit('setBrandData',{...this.superData,brandId: this.brandId,carBrandPic:this.carBrandPic})
				} else {
					await this.$request({
						method: 'POST',
						url: '/terminal-serve-center/car/app/saveChoiceCarType/v2',
						data: {
							carId: this.getUserInfo.userCarInfo.carId,
							levelId: n
						}
					})
				}
				await this.getUserInfoFn()
				this.back()
			},
		}
	}
</script>

<style lang="scss" scoped>
.border {
	border-bottom: 1px rgba(0,0,0,0.08) solid;
}
.width_80 {
	width: 80%;
}
.brand {
	background-color: #ffffff;
	box-sizing: border-box;
	// display: flex;
	// flex-direction: column;
	min-height: 100vh;
	/deep/ scroll-view {
		max-height: 100% !important;
	}
	/deep/ .u-popup{
	    flex: 0;
	}
}
.navbar {
	width: 100%;
	.header {
		width: 60%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-back {
			margin-left: 0;
			display: flex;
			align-items: center;
			text {
				margin-left: 10px;
			}
		}
	}
}

.search {
	width: calc(100% - 64rpx);
	margin: 36rpx 32rpx;
}
.list {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 20px;
	/deep/ scroll-view {
		max-height: 100% !important;
	}
	/deep/ .u-index-anchor__text {
		font-weight: 500;
		line-height: 30px;
		height: 30px;
	}
	/deep/ .u-index-anchor{
		margin: 20px 0 10px;
		border-color: transparent !important; 
	}
	/deep/ .u-index-list__letter {
		// top: 30% !important;
	}
	image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	&-hot {
		/deep/ .u-grid-item {
			margin: 20rpx 0;
		}
	}
	&-cell {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		margin: 0 20rpx;
		border-bottom: 1px solid rgba(0,0,0,0.08);
		&-text {
			padding-left: 24rpx;
		}
	}
	
}
.empty {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		width: 220px;
		height: 180px;
	}
	text {
		font-size: 30rpx;
		color: rgba(0,0,0,0.45);
		line-height: 30rpx;
	}
}
.type {
	width: 270px;
	height: 100vh;
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	
	&-title {
		width: calc(100% - 32px);
		height: 40px;
		padding: 0 16px;
		line-height: 40px;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		color: rgba(0, 0, 0, 0.85);
		justify-content: space-between;
	}
	&-subTitle {
		font-size: 28rpx;
		font-weight: 500;
		height: 40px;
		line-height: 40px;
		padding-left: 48rpx;
		color: rgba(0,0,0,0.85);
	}
	&-list {
		flex: 1;
		margin: 0 17px 100px;
		overflow-y: scroll;
		image {
			width: 60px;
			height: 48px;
			border-radius: 50%;
		}
		&-title {
			height: 40px;
			line-height: 50px;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(0,0,0,0.85);
		}
		&-content {
			display: flex;
			align-items: center;
			padding: 16rpx 0;
			text {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(0,0,0,0.65);
				padding-left: 20rpx;
			}
			/deep/ .u-radio>text {
				word-break: break-all;
				line-height: 30px !important;
				// max-width: 216px !important;
			}
		}
	}
}
</style>
